import React, { memo,useEffect } from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import { RotationBox } from './RotationChart.style'
import { imgBaseUrl } from '@/assets/data/baseUrl'

function RotationChart(props) {
    const { rotationImg } = props
    // console.log(Swiper)
    useEffect(() => {
        setTimeout(() => {
            new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 3000
                },
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                }
            })
        }, 100)
    }, [])
    return (
        <RotationBox>
            <div className="swiper-container">
                <div className="swiper-wrapper">
                {
                    rotationImg.map((item, index) => {
                        return (
                            <div 
                            key={index}
                            className="swiper-slide">
                                    <img className="rotationChart-img" key={index}
                                     src={imgBaseUrl+item.imgSrc}  />
                            </div>
                        )
                    })
                }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </RotationBox>
    )
}

export default memo(RotationChart)
